<template>
  <div class="app-container">
    <div class="total-layout">
       <div class="total-name">客户概况</div>
       <div class="total-row" v-if="customerNumInfo">
          <el-row :gutter="30">
              <el-col :span="6" >
                <div class="total-col">
                  <div class="num">{{ customerNumInfo.customerAllNum }}</div>
                  <div class="name">客户总数</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-col">
                  <div class="num">{{ customerNumInfo.orderCustomerNum }}</div>
                  <div class="name">实际成交数</div>
                </div>
              </el-col>
              <el-col :span="6" >
                <div class="total-col">
                  <div class="num">{{ customerNumInfo.tradeCustomerNum }}</div>
                  <div class="name">贸易客户数</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-col">
                  <div class="num">{{ customerNumInfo.notTradeCustomerNum }}</div>
                  <div class="name">非贸易客户数</div>
                </div>

              </el-col>
          </el-row>
       </div>
<!--      <div class="total-name">客户资料完整率</div>-->
<!--      <div class="total-row">-->
<!--        <el-row :gutter="30">-->
<!--          <el-col :span="6" >-->
<!--            <div class="total-col">-->
<!--              <div class="num">666</div>-->
<!--              <div class="name">完整度50%</div>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <div class="total-col">-->
<!--              <div class="num">666</div>-->
<!--              <div class="name">完整度70%</div>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="6" >-->
<!--            <div class="total-col">-->
<!--              <div class="num">666</div>-->
<!--              <div class="name">完整度85%</div>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="6">-->
<!--            <div class="total-col">-->
<!--              <div class="num">666</div>-->
<!--              <div class="name">完整度100%</div>-->
<!--            </div>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </div>-->

      <div class="total-name">
        潜在客户用量
        <el-radio-group v-model="radio1" size="small" style="margin-left:20px">
          <el-radio-button label="threeMonths">3个月</el-radio-button>
          <el-radio-button label="sixMonths">6个月</el-radio-button>
          <el-radio-button label="sixMonthsMore">6个月以上</el-radio-button>
        </el-radio-group>
      </div>
      <div class="total-row" v-if="potentialCustomerInfo">
        <el-row :gutter="30">
          <el-col :span="6" >
            <div class="total-col">
              <div class="num">{{ potentialCustomerInfo[radio1]['customerNum'] ? potentialCustomerInfo[radio1]['customerNum'] : 0 }}</div>
              <div class="name">潜在客户总数</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="total-col">
              <div class="num">{{ potentialCustomerInfo[radio1]['pa6UseNum'] ? potentialCustomerInfo[radio1]['pa6UseNum'] : 0 }}<span style="font-size:14px;font-weight: normal;padding-left:5px">吨</span></div>
              <div class="name">PA6潜在用量</div>
            </div>
          </el-col>
          <el-col :span="6" >
            <div class="total-col">
              <div class="num">{{ potentialCustomerInfo[radio1]['pa66UseNum'] ? potentialCustomerInfo[radio1]['pa66UseNum'] : 0 }}<span style="font-size:14px;font-weight: normal;padding-left:5px">吨</span></div>
              <div class="name">PA66潜在用量</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="total-col">
              <div class="num">{{ potentialCustomerInfo[radio1]['pcUseNum'] ? potentialCustomerInfo[radio1]['pcUseNum'] : 0 }}<span style="font-size:14px;font-weight: normal;padding-left:5px">吨</span></div>
              <div class="name">PC潜在用量</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="30" style="margin-top:30px">
          <el-col :span="6" >
            <div class="total-col">
              <div class="num">{{ potentialCustomerInfo[radio1]['absUseNum'] ? potentialCustomerInfo[radio1]['absUseNum'] : 0 }}<span style="font-size:14px;font-weight: normal;padding-left:5px">吨</span></div>
              <div class="name">ABS潜在用量</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="total-col">
              <div class="num">{{ potentialCustomerInfo[radio1]['bxUseNum'] ? potentialCustomerInfo[radio1]['bxUseNum'] : 0 }}<span style="font-size:14px;font-weight: normal;padding-left:5px">吨</span></div>
              <div class="name">玻纤潜在用量</div>
            </div>
          </el-col>
          <el-col :span="6" >
            <div class="total-col">
              <div class="num">{{ potentialCustomerInfo[radio1]['cplUseNum'] ? potentialCustomerInfo[radio1]['cplUseNum'] : 0 }}<span style="font-size:14px;font-weight: normal;padding-left:5px">吨</span></div>
              <div class="name">CPL潜在用量</div>
            </div>
          </el-col>

        </el-row>
      </div>

      <div class="total-name">
        客户销售排行（吨毛利）
        <el-radio-group v-model="radio2" size="small" style="margin-left:20px" @change="getSaleProfitList">
          <el-radio-button label="PA6"></el-radio-button>
          <el-radio-button label="PA66"></el-radio-button>
          <el-radio-button label="ABS"></el-radio-button>
          <el-radio-button label="PC"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="total-row">
        <div id="myChart" :style="{'height':'550px'}" v-loading="loadingChart" style="width:calc(100% - 350px);float:left"></div>

        <el-card class="box-card" style="width:300px;float:right" :body-style="{padding:'10px 20px'}">
          <div slot="header" class="clearfix">
            <span style="font-size:14px;font-weight: bold">总毛利排名前十</span>
          </div>
          <div v-for="item in saleProfitCustomerList"  :key="item.customerId" class="text item itemClick" @click="toInfo(item)" style="font-size:12px;line-height: 30px;text-align: left;cursor: pointer">
             {{item.customerName }}
          </div>
        </el-card>


      </div>
    </div>


  </div>
</template>
<script>
    import axios from 'axios'
    import {statisticsMainData,saleProfitList} from '@/api/partner'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'

    export default {
      name: "index",
      data(){
          return {
            loadingChart:false,
            radio1:'threeMonths',
            customerNumInfo:null,
            potentialCustomerInfo:null,
            radio2:'PA6',
            saleProfitCustomerList:[],

          }
      },
      computed: {

      },
      created() {
          this.getData();
          this.getSaleProfitList();
      },
      filters: {

      },
      methods:{
        //去客户详情
        toInfo(item){
          this.$router.push({name:'customerDetail',query:{id:item.customerId}})
        },
        //获取数据
        getData(){
          statisticsMainData().then((res)=>{
              this.customerNumInfo = res.customerNumInfo;
              this.potentialCustomerInfo = res.potentialCustomerInfo;
          })
        },

        //获取销售吨毛利排行
        getSaleProfitList(){
          this.loadingChart = true;
          saleProfitList({goodsName:this.radio2}).then((res)=>{
              let xList = [];
              res.salePerProfitCustomerList.xList.forEach((el)=>{
                xList.push(el.customerName)
              })
              this.drawCaiGouCount(xList,res.salePerProfitCustomerList.yList);
              this.saleProfitCustomerList = res.saleProfitCustomerList;
          })
        },
        //画图表
        drawCaiGouCount(x,y){
          let myChart = this.$echarts.init(document.getElementById('myChart'));
          // 绘制图表
          myChart.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              },
            },
            grid:{
              x:100,
              y:40,
              x2:40,
              y2:100,
              borderWidth:1
            },
            xAxis: {
              type: 'category',
              data: x,
              axisLabel: {
                interval: 0,
                rotate: 15 ,
                textStyle: {
                  fontSize:'10',
                }

              }
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: y,
                type: 'bar',
                barMaxWidth:30,
              }
            ]
          });
          this.loadingChart = false;
        },



      },
    }
</script>

<style scoped lang="scss">
  .itemClick:hover{
    text-decoration: underline;
    color:#409EFF
  }
  .total-layout{
    .total-name{
      margin:20px 0;
      font-size:16px;
      font-weight: bold;
    }
    .total-row{
      margin-bottom:40px;
      text-align: center;
      .total-col{
         border:1px solid #eee;
         padding:30px 0;
         border-radius: 20px;

      }
       .num{
         font-size:30px;
         font-weight: bold;

       }
       .name{
         font-size:14px;
         color:#999;
         margin-top:10px
       }
    }
  }
</style>
